<template>
	<view class="addSeed">
		<view class="seed_choose_box">
			<view class="seed_top_box">
				<view class="area-title">
					种子选择
				</view>
				<view class="area_num_box">
					{{seedTotal}}m²/{{area}}m²
				</view>
			</view>
			<view class="seed_list_box">
				<view class="seed_item" v-for="item in seed_type_list" :key="item.name">
					<view class="seed_left_box">
						<view class="seed_image">
							<image :src="item.cover" mode=""></image>
						</view>
						<view class="seed_info_box">
							<view class="seed_name">
								{{item.name}}
							</view>
							<view class="seed_info_desc">
								{{item.start_area}}m²起种 预估产量{{item.pre_yield}}kg/m²
							</view>
						</view>
					</view>
					<view class="seed_right_op">
						<image class="icon-40" src="../../static/images/icon/icon_del_btn.png" mode=""
							@tap="countFunc(item,false)"></image>
						<view class="num_box">{{ item.num }}</view>
						<image class="icon-40" src="../../static/images/icon/icon_add_btn.png" mode=""
							@tap="countFunc(item,true)"></image>
					</view>
				</view>
			</view>
		</view>
		<view class="bottom_op_box">
			<button class="buy_now" @tap="buyNow">提交</button>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				seed_type_list: [],
				product_id: '',
				order_id: '',
				detailsObj: {},
				area: 0
			};
		},
		onLoad(val) {
			if (val.id) {
				this.product_id = val.id;
				this.order_id = val.order_id;
				this.area = val.area;
				this.getGroProductDetail();
			}

		},
		methods: {
			countFunc(val, num) {
				if (num) {
					if (this.seedTotal >= this.area) {
						this.$helper.toast('超出种植面积');
					} else {
						val.num += 1;
					}
				} else {
					if (val.num >= 1) {
						val.num -= 1;
					}
				}
			},
			getGroProductDetail() {
				this.$api.getGroProductDetail({
					product_id: this.product_id
				}).then(res => {
					if (res.code == 1) {
						this.detailsObj = res.data;
						this.seed_type_list = this.detailsObj.farm_seed.map(item => {
							this.$set(item, 'num', 0);
							return item;
						})
					}
				})
			},
			buyNow() {
				let params = {
					order_id: this.order_id
				}
				let farm_seed = '';
				this.seed_type_list.forEach((item => {
					let str = '';
					if (item.num != 0) {
						str = `${item.id}_${item.num}`
						if (farm_seed.length) {
							farm_seed = farm_seed + ',' + str;
						} else {
							farm_seed = str;
						}
					}
				}))
				params.farm_seed = farm_seed;

				this.$api.addSeed(params).then(res => {
					if (res.code == 1) {
						uni.navigateTo({
							url: `/pages/groundPage/payPage?resData=${JSON.stringify(res.data)}`
						})
					} else {
						this.$helper.toast(res.msg);
					}
				})

			}
		},
		computed: {
			seedTotal() {
				return this.seed_type_list.reduce((pre, cur) => {
					return pre + cur.num
				}, 0)
			}
		}
	}
</script>

<style lang="scss">
	.addSeed {
		padding: 20rpx 24rpx;
		min-height: 100vh;
		background-color: #F9F9F9;

		.seed_choose_box {
			margin-bottom: 30rpx;

			.seed_top_box {
				display: flex;
				align-items: center;
				justify-content: space-between;

				.area_num_box {
					font-weight: 400;
					font-size: 24rpx;
					color: #999999;
				}
			}

			.seed_list_box {
				background: #FFFFFF;
				border-radius: 20rpx;
				padding: 20rpx 22rpx;

				.seed_item {
					display: flex;
					align-items: center;
					justify-content: space-between;
					margin-bottom: 40rpx;

					&:nth-last-of-type(1) {
						margin-bottom: 10rpx;
					}

					.seed_left_box {
						display: flex;

						.seed_image {
							width: 90rpx;
							height: 90rpx;
							border-radius: 12rpx;
							overflow: hidden;
							margin-right: 15rpx;

							image {
								width: 100%;
								height: 100%;
							}
						}

						.seed_info_box {
							.seed_name {
								font-size: 30rpx;
								color: #222222;
								margin-bottom: 11rpx;
							}

							.seed_info_desc {
								font-weight: 400;
								font-size: 24rpx;
								color: #999999;
							}
						}

					}

					.seed_right_op {
						display: flex;
						align-items: center;
						margin-left: 30rpx;

						.num_box {
							width: 40rpx;
							height: 40rpx;
							text-align: center;
							line-height: 40rpx;
						}
					}
				}
			}

		}

		.bottom_op_box {
			display: flex;
			position: relative;
			width: 100vw;
			align-items: center;
			justify-content: space-between;
			padding: 19rpx 23rpx;
			position: fixed;
			box-sizing: border-box;
			bottom: 0;
			left: 0;

			.buy_now {
				width: 96%;
				height: 80rpx;
				background: #fed100;
				border-radius: 40rpx;
				font-size: 30rpx;
			}
		}
	}
</style>